<template>
  <div class="goods-card">
    <van-image fit="contain" src="https://s1.ax1x.com/2020/10/13/0W4MO1.png"/>
    <div class="goods-info">
      <div class="goods-text">
        <p class="goods-name">麻辣肉片</p>
        <p class="goods-sales">
          销量7
        </p>
        <p class="goods-money">
          <span class="goods-money-units">￥</span>
          <span class="goods-money-number">123.00</span>
        </p>
      </div>
      <div class="goods-number-button">
        <button class="goods-sub" v-show="goodsNumber>0" @click="goodsSub">-</button>
        <span class="goods-number" v-show="goodsNumber>0" v-text="goodsNumber">0</span>
        <button class="goods-add" @click="goodsAdd">+</button>
      </div>
    </div>
  </div>
</template>

<script>

import {Image as VanImage} from 'vant';

export default {
  name: "GoodsCard",
  data() {
    return {
      goodsNumber: 0
    }
  },
  methods: {
    goodsSub() {
      if(this.goodsNumber>0){
        this.goodsNumber--;
      }else {
        this.goodsNumber=0;
      }
    },
    goodsAdd() {
      this.goodsNumber++;
      this.$emit('changeShop',this.goodsNumber);
    }
  },

  components: {
    'van-image': VanImage
  }
}
</script>

<style lang="scss" scoped>
@import "./GoodsCard.scss";

</style>
